<template>
	<view class="app_Cont">
		<scroll-view class="showCont" scroll-y="true" @scroll="scroll" :scroll-top="scrollTop" @scrolltolower="scrolltolower" lower-threshold="10" v-if="showCont">
			
			<view class="bannerCont">
				 <u-swiper
					:list="bannerArr"
					indicator
					height="320"
					indicatorMode="line"
					circular
				></u-swiper>
				<view class="headTop">
					<image class="headFamily" src="/static/img/family.png" ></image>
					<view class="headDes">您最贴心的求职帮手</view>
				</view>
			</view>
			<view class="workCont" >
				<view class="cardCont">
					<view class="card_leftItem color1" @click="viewFn">
						<view class="iconfont icon-liulanjilu"></view>
						<view class="">浏览船员</view>
					</view>
					<view class="card_leftItem color2" @click="unlockFn">
						<view class="iconfont icon-xiangmudongjie"></view>
						<view class="">解锁船员</view>
					</view>
					<view class="card_leftItem color3" @click="sendWork">
						<view class="iconfont icon-fabubiaoshu"></view>
						<view class="">发布岗位</view>
					</view>
				</view>
				<view class="serchNav">
					<view class="serchLeft">
						<view class="shuTag"></view>
						<view class="serchLeftText">精选船员</view>
					</view>
					<view class="serchRight">
						<view class="serchItem" @click="showPosition = true">
							<view>{{position_name}}</view>
							<view class="iconfont icon-zhijiao-triangle"></view>
						</view>
						<view class="serchItem" @click="showCblx = true">
							<view>{{watercraft_type}}</view>
							<view class="iconfont icon-zhijiao-triangle"></view>
						</view>
						<view class="serchItem" @click="showHxyq = true">
							<view>{{watercraft_area}}</view>
							<view class="iconfont icon-zhijiao-triangle"></view>
						</view>
					</view>
				</view>
				<view class="remberCont" v-if="showPay">
					<view class="payLeft">
						<view class="iconfont icon-tongzhi"></view>
						<view class="tipText">
							<text v-if="menberData.crew_hy_type==0">您当前还有{{menberData.cs}}次解锁联系机会</text>
							<text v-else>{{menberData.crew_hy_end_time}}前可免费无限次解锁</text>
						</view>
						<view class="payBtn" @click="payFn">{{menberData.crew_hy_type==0?'点击充值':'会员中心'}}</view>
					</view>
					<view class="closeBtn iconfont icon-guanbi-" @click="showPay = false"></view>
				</view>
				<view class="bookItem" @click="detailFn(item)" :key="index" v-for="(item,index) in listArr">
					<view class="bootTop">
						<view class="bookHead">
							<view class="bookHeadLeft">
								<view class="bookName">{{item.zw}}</view>
								<view class="workTag" v-if="item.active_time.includes('刚刚')||item.active_time.includes('昨天')||item.active_time.includes('今天')||item.active_time.includes('分钟')">活跃</view>
							</view>
							<view class="workMoney">{{item.type==1?item.qwyx+'美元':item.qwyx}}</view>
						</view>
						<view class="bookTags">
							<view class="bookTagsItem">{{item.zs}}</view>
							<view class="bookTagsItem">{{item.cblx=='均可'?'船型均可':item.cblx}}</view>
							<view class="bookTagsItem">{{item.hxyq=='均可'?'航线均可':item.hxyq}}</view>
						</view>
						<view class="bookOtherInfo">
							<view class="itemDes">
								<view class="iconfont icon-xueli"></view>
								<view>{{item.xl}}</view>
							</view>
							<view class="itemDes">
								<view class="iconfont icon-gongzuojingyan"></view>
								<view>{{item.gzjy}}<text v-if="item.type==1">年</text>经验</view>
							</view>
							<view class="itemDes noRight flex_Pull">
								<text class="iconfont icon-purseS-fill"></text>
								<text class="overText">{{item.jg}}</text>
							</view>
						</view>
					</view>
					<view class="bootUnder">
						<view class="comLeft">
							<view class="comImg iconfont icon-chuanyuanzhaopin">
								
							</view>
							<view class="comInfo">
								<view class="comInfoTop">
									{{item.real_name}} · {{item.age}}岁
								</view>
							</view>
						</view>
						<view class="workTime">最近活跃 {{item.active_time}}</view>
					</view>
				</view>
				<noData v-if="listArr.length==0&&!isChange"></noData>
				<loadMore v-if="!isChange&&last_page==page"></loadMore>
			</view>
			<view class="totop iconfont icon-icon-test1" @click="totopFn"></view>
		</scroll-view>
		<tabBar></tabBar>
		<u-picker :show="showPosition" @confirm="positionSureFn" @cancel="showPosition = false" @close="showPosition = false" :closeOnClickOverlay="true" :columns="positionArr"></u-picker>
		<u-picker :show="showCblx" @confirm="cblxSureFn" @cancel="showCblx = false" @close="showCblx = false" :closeOnClickOverlay="true" :columns="zslxArr"></u-picker>
		<u-picker :show="showHxyq" @confirm="hxyqSureFn" @cancel="showHxyq = false" @close="showHxyq = false" :closeOnClickOverlay="true" :columns="hxyqArr"></u-picker>
		<load v-if="!showCont||isChange"></load>
		<u-toast ref="uToast"></u-toast>
		<view class="toVipCont" v-show="showVipMask">
			<view class="vipMask">
				<image mode="widthFix" src="/static/img/vip.png"></image>
				<view class="vipMaskName">超级会员</view>
				<view class="qy_des">
					<!-- <view class=" textCenter">超级会员4大权益</view> -->
					<view class="qydes_item flexDes">
						<view class="iconfont icon-jiesuo"></view>
						<view class="qydes_item_text">无限次免费解锁船员</view>
					</view>
					<view class="qydes_item flexDes">
						<view class="iconfont icon-qiyejingzhunhuokexitong"></view>
						<view class="qydes_item_text">快速筛选心仪船员</view>
					</view>
					<view class="qydes_item flexDes">
						<view class="iconfont icon-tuijian-m"></view>
						<view class="qydes_item_text">智能推荐新船员</view>
					</view>
					<view class="qydes_item flexDes">
						<view class="iconfont icon-fabubiaoshu"></view>
						<view class="qydes_item_text">免费发布岗位，快速招人</view>
					</view>
				</view>
				<view class="openBtn" @click="payFn">立即开通</view>
			</view>
			<view class="closeBtn iconfont icon-guanbi-" @click="showVipMask = false"></view>
		</view>
		<u-modal :show="showModal" :showCancelButton="true" @cancel="showModal = false" title="认证提示" @confirm="modalSure"  :content='modalCont'></u-modal>
		
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar.vue'
	import api from '@/http/api.js'
	import getCate from '@/utils/getCate.js'
	import load from '@/components/load.vue'
	import noData from '@/components/noData.vue'
	import loadMore from '@/components/loadMore.vue'
	export default {
		components:{tabBar,load,noData,loadMore},
		data() {
			return {
				showModal:false,
				modalType:1,
				modalCont:'请先绑定企业信息，才能发布岗位',
				showPosition:false,
				showHxyq:false,
				showCblx:false,
				showCont:false,
				showPay:true,
				showVipMask:false,
				bannerArr:['/static/img/share.png'],
				page:1,
				per_page:10,
				last_page:0,
				position_name:'职务不限',
				watercraft_type:'证书不限',
				watercraft_area:'航线不限',
				positionArr:[],
				zslxArr:[['证书不限','甲一','甲二','丙一','丙二']
				],
				hxyqArr:[],
				listArr:[],
				isChange:false,
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				menberData:{},
			};
		},
		onShow() {
			this.getMenber()
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '鲸领航系统分享',
				imageUrl: 'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: '鲸领航系统分享',
				imageUrl: 'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
			}
		},
		methods:{
			async sendWork(){
				await this.getMenber()
				if(this.menberData.crew_hy_type==0){
					this.showVipMask = true
					return false
				}else if(this.menberData.crew_enterprise.is_crew_enterprise==1){
					this.modalType = 1
					this.modalCont ='请先绑定企业信息，才能发布岗位'
					this.showModal = true
					return false
				}else if(this.menberData.crew_enterprise.is_crew_enterprise==3){
					this.modalType = 2
					this.modalCont ='会员权限已被管理员禁用，禁止发布岗位。恢复请联系管理员'
					this.showModal = true
					return false
				}else{
					uni.navigateTo({
						url: 'sendWork/sendWork?moblie='+this.menberData.crew_enterprise.crew_enterprise.enterprise_mobile
					});
				}
			},
			modalSure(){
				this.showModal = false
				if(this.modalType==1){
					uni.navigateTo({
						url: 'vip/signCom/signCom?id=1'
					});
				}else{
					uni.makePhoneCall({
						phoneNumber:this.menberData.contact_fs,
					})
				}
			},
			viewFn(){
				uni.navigateTo({
					url: 'bootView/bootView'
				});
			},
			unlockFn(){
				uni.navigateTo({
					url: 'bootUnlock/bootUnlock'
				});
			},
			payFn(){
				this.showVipMask = false
				uni.navigateTo({
					url: 'vip/vip'
				});
			},
			scroll: function(e) {
				
				this.old.scrollTop = e.detail.scrollTop
			},
			totopFn(){
			
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
			positionSureFn(data){
				this.position_name  = data.value[0]
				this.showPosition = false
				this.serchFn()
			},
			cblxSureFn(data){
				this.watercraft_type  = data.value[0]
				this.showCblx = false
				this.serchFn()
			},
			hxyqSureFn(data){
				this.watercraft_area  = data.value[0]
				this.showHxyq = false
				this.serchFn()
			},
			scrolltolower(){
				if(this.page<this.last_page||true){
					this.page++
					this.isChange = true
					
					this.getData()
				}
			},
			detailFn(item){
				uni.navigateTo({
					url: 'bootDetail/bootDetail?id='+item.biographical_notes_id
				});
			},
			serchFn(){
				this.listArr = []
				this.page = 1
				this.isChange = true
				this.last_page = 0
				this.getData()
			},
			getData(){
				let data = {
					page:this.page,
					per_page:this.per_page,
					zw:this.position_name!='职务不限'?this.position_name:'',
					zs:this.watercraft_type!='证书不限'?this.watercraft_type:'',
					hxyq:this.watercraft_area!='航线不限'?this.watercraft_area:'',
				}
				api.getRequst(data,'/api/Crew/getCrew').then((res)=>{
					if(res.code==1){
						let arr = res.data.data
						for(let item of arr){
							this.listArr.push(item)
						}
						this.last_page = res.data.last_page
					}
					this.showCont = true
					this.isChange = false
				})
			},
			getBanner(){
				let data = {}
				api.getRequst(data,'/api/Crew/getBanner').then((res)=>{
					if(res.code==1){
						this.bannerArr = res.data.map((item,index)=>{
							return item.banner_img
						})
					}
					this.getData()
					this.getMenber()
				})
			},
			getMenber(){
				let data = {}
				api.getRequst(data,'/api/Crew/getData').then((res)=>{
					if(res.code==1){
						this.menberData = res.data
						
					}
				})
			},
		},
		async onLoad() {
			await this.getBanner()
			let _positionArr = await getCate.getCateFn(3)
			this.positionArr = [_positionArr.map((item)=>item.name).concat('职务不限')]
			let _hxyqArr = await getCate.getCateFn(2)
			this.hxyqArr = [_hxyqArr.map((item)=>item.name).concat('航线不限')]
		}
	}
</script>

<style lang="scss">
	.showCont{
		box-sizing: border-box;
		height: 100vh;
		padding-bottom: 120rpx;
		display: flex;
		flex-direction: column;
	}
	.bannerCont{
		text-align: center;
		width: 100%;
		position: relative;
		image{
			height: 300rpx;
		}
		.headTop{
			width: 100%;
			height: 60rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			padding-left: 3%;
			position: absolute;
			left: 0;
			top: 90rpx;
			color: #fff;
			.headFamily{
				width: 150rpx;
				height: 60rpx;
			}
		}
	}
	.workCont{
		width: 100%;
		height: 500rpx;
		margin-top: -40rpx;
		position: relative;
		z-index: 1;
		border-radius: 30rpx;
		flex: 1;
		background-color: #f8f8f8;
		padding: 30rpx 4% 140rpx;
		box-sizing: border-box;
		.cardCont{
			display: flex;
			justify-content: space-between;
			.card_leftItem{
				width: 30%;
				margin-bottom: 20rpx;
				text-align: center;
				padding: 30rpx 0;
				border-radius: 20rpx;
				box-sizing: border-box;
				color: #333;
				.iconfont{
					font-size: 50rpx;
					margin-bottom: 15rpx;	
				}
			}
			.color1{
				background-image:linear-gradient(to right bottom,#ffc78e,#fff);
				.iconfont{
					color: #ff9860;
				}
			}
			.color2{
				background-image:linear-gradient(to right bottom,#c0e8c9,#fff);
				.iconfont{
					color: #66dc79;
				}
			}
			.color3{
				background-image:linear-gradient(to right bottom,#cbd3f6,#fff);
				.iconfont{
					color: #4e6dff;
				}
			}
		}
		.remberCont{
			background-color: #e2ccb0;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin: 30rpx auto;
			padding: 20rpx 4%;
			box-sizing: border-box;
			.payLeft{
				flex: 1;
				width: 100rpx;
				display: flex;
				place-items: center;
				.tipText{
					margin-right: 10rpx;
				}
				.iconfont{
					font-size: 40rpx;
					margin-right: 10rpx;
				}
				.payBtn{
					color: #3f55cc;
				}
			}
			.closeBtn{
				font-size: 30rpx;
			}
			
		}
		.serchNav{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.serchLeft{
				display: flex;
				position: relative;
				font-size: 30rpx;
				.serchLeftText{
					position: relative;
					z-index: 2;
					font-weight: bold;
				}
				.shuTag{
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: 0;
					width: 120rpx;
					background-image: linear-gradient(to right,white,#3f55cc);
				}
			}
			.serchRight{
				display: flex;
				align-items: center;
				.serchItem{
					margin-left: 30rpx;
					display: flex;
					align-items: center;
					color: #666;
					border-radius: 5rpx;
					.iconfont{
						font-size: 20rpx;
						position: relative;
						top: 6rpx;
						left: -4rpx;
					}
				}
			}
		}
		.bookItem{
			// background-color: #3f55cc;
			border-radius: 30rpx;
			background-color: #fff;
			overflow: hidden;
			width: 100%;
			padding:30rpx 30rpx 25rpx;
			box-sizing: border-box;
			margin-top: 30rpx;
			.bootTop{
				.bookHead{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.bookHeadLeft{
						display: flex;
						align-items: center;
						.bookName{
							font-size: 30rpx;
							font-weight: bold;
							// margin: 0 10rpx;
							margin-right: 10rpx;
						}
						.workTag{
							padding: 5rpx 20rpx;
							font-size: 24rpx;
							// border: 1px solid #f56c6c;
							// background-color: ;
							background-image: linear-gradient(to right, #f56c6c,#ebc0b4);
							color: #fff;
							// margin-left: 10rpx;
							border-radius: 20rpx 0 20rpx 0;
							transform: scale(0.85);
						}
					}
					.workMoney{
						color: #3f55cc;
						font-size: 30rpx;
					}
				}
				.bookTags{
					display: flex;
					align-items: center;
					margin: 5rpx 0 25rpx;
					.bookTagsItem{
						margin-top: 15rpx;
						padding: 5rpx 20rpx;
						background-color:#dae3fb;
						color: #3f55cc;
						font-size: 26rpx;
						border-radius: 0rpx 25rpx 0rpx 0rpx;
						margin-right: 20rpx;
					}
					.overText{
						max-width: 250rpx;
						
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}
				}
				.bookOtherInfo{
					width: 100%;
					display: flex;
					align-items: center;
					.itemDes{
						display: flex;
						align-items: center;
						font-size: 24rpx;
						border-right: 1px solid #666;
						color: #666;
						padding-right: 25rpx;
						height: 26rpx;
						line-height: 26rpx;
						margin-left: 25rpx;
						.iconfont{
							font-size: 24rpx;
							height: 26rpx;
							line-height: 26rpx;
							margin-right: 8rpx;
						}
					}
					.itemDes:first-child{
						margin-left: 0;
					}
					.noRight{
						border-right: none;
					}
					.flex_Pull{
						flex: 1;
						width: 100rpx;
						.overText{
							width: 100%;
							height: 26rpx;
							line-height: 26rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}
			}
			.bootUnder{
				display: flex;
				
				justify-content: space-between;
				align-items: center;
				padding-top: 25rpx;
				margin-top: 25rpx;
				border-top: 1px dashed #ddd;
				// background-color: #cadfff;
				// color: #666;
				.comLeft{
					display: flex;
					align-items: center;
					.comImg{
						margin-right: 20rpx;
					}
					.comInfo{
						.comInfoUnder{
							color: #666;
							margin-top: 6rpx;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							.comYuan{
								margin: 0 10rpx;
							}
						}
						
					}
				}
				.workTime{
					color: #999;
					font-size: 24rpx;
				}
			}
			
		}
	}
	.totop{
		position: fixed;
		z-index: 1;
		right: 4%;
		background-color:rgba(63, 85, 204,0.3);
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 80rpx;
		bottom: 120rpx;
		font-size: 50rpx;
		color: #fff;
	}
	.toVipCont{
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0,0,0.5);
		display: flex;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
		justify-content: center;
		flex-direction: column;
		.vipMask{
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 30rpx;
			width: 70%;
			background-image: linear-gradient(to bottom,#f4ece1,#fff);
			text-align: center;
			.vipMaskName{
				font-size: 40rpx;
				margin-top: 20rpx;
			}
			.vipDes{
				color: #333;
				margin-top: 10rpx;
			}
			image{
				width: 60%;
				
			}
			.qy_des{
				box-sizing: border-box;
				margin-top: 20rpx;
				position: relative;
				.textCenter{
					text-align: center;
					color: #333;
				}
				.qydes_item{
					margin-top: 15rpx;
					.qy_top{
						display: flex;
						align-items: center;
						font-size: 30rpx;
						justify-content: center;
						.iconfont{
							width: 40rpx;
							text-align: center;
							margin-right: 20rpx;
							padding: 15rpx 0;
							font-size: 40rpx;
						}
						.icon-tuijian-m{
							font-size: 32rpx;
						}
					}
					.qy_text{
						text-align: center;
						color: #999;
						font-size: 24rpx;
						margin: 20rpx 0 30rpx;
					}
				}
				.flexDes{
					display: flex;
					align-items: center;
					justify-content: center;
					color: #d1a57a;
					.iconfont{
						margin-right: 10rpx;
						font-size: 32rpx;
					}
					.icon-tuijian-m{
						font-size: 28rpx;
					}
				}
			}
			.openBtn{
				padding: 25rpx 0;
				text-align: center;
				border-radius: 50rpx;background-image: linear-gradient(to bottom right,#333,#000);
				color: #fff;
				margin-top: 50rpx;
			}
		}
		.closeBtn{
			width: 50rpx;
			height: 50rpx;
			text-align: center;
			background-color: #999;
			line-height: 50rpx;
			color: #fff;
			border-radius: 50%;
			margin-top: 30rpx;
		}
	}
</style>
